<template>
	<view class="box p-4 bg-light w-100">
		<tabsTop tabName="购卡中心"></tabsTop>
		<!-- 购卡中心 -->
		<view @click="handleTabs('/pages/card/Purchase_Crad?Prepayment_Card_Scheme_SerialNumber='+item.Prepayment_Card_Scheme_SerialNumber)" class="t1 rounded-lg  bg-white  p-2 mt-3" v-for="(item,i) in tableData" :key="i" style="position: relative;">
			<image :src="Domain_IMG + item.Picture_URL" mode="widthFix" style="width: 100%;"></image>
			<view class="text-white" style="position: absolute;right: 50rpx;">
				<view class="font-lg font-weight-bolder text-center">{{item.Prepayment_Card_Scheme_Name}}</view>
				<view class="font text-right">￥<text class="text-info">{{item.Starting_Amount}}</text></view>
				<view class="font text-right">
					<button type="primary" size="mini">购买</button>
				</view>
			</view>
		</view>
		<view class="flex text-center justify-center py-2">
			<text class="font-small text-muted">{{BottomText}}</text>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {
		WXPrepaymentCardAll,
		WXMyprepaymentCard,
	} from '@/api/group.js'
	import tabsTop from "@/components/tabs/tabs-top.vue";
	export default {
		components: { //轮播图组件
			tabsTop
		},
		data() {
			return {
				Domain_IMG: app.globalData.Domain_IMG,
				form: {
					page: 1,
					limit: 5,
					Enterprise_Info_SerialNumber: app.globalData.Enterprise_Info_SerialNumber,
					App_ID: app.globalData.App_ID,
				},
				tableData:[],
				total:1,
				BottomText:'下拉加载更多',
				timer:null,
				lock:false
			};
		},
		onLoad() {
			this.getAllCard(this.form)
		},
		onReachBottom() {
			console.log('触底了')
			if(this.BottomText!='暂无更多储值卡'){
				this.form.page++
				this.thorw()
			}
		},
		methods:{
			async getAllCard(data){
				uni.showLoading({
					title:'加载中...'
				})
				this.BottomText = '加载中...'
				const res = await WXPrepaymentCardAll(data)
				console.log(res)
				uni.hideLoading()
				if(res.Status=='success'){
					this.tableData.push(...res.tableData)
					this.total = Number(res.limit)
					this.timer = null
					clearInterval(this.timer)
					if(this.tableData.length==this.total){
						this.BottomText = '暂无更多储值卡'
					}else{
						this.BottomText = '下拉加载更多'
					}
				}
			},
			thorw(secend=200){
				this.timer = null
				clearInterval(this.timer)
				this.timer = setTimeout(()=>{
					this.getAllCard(this.form)
				},secend)
			},
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		box-sizing: border-box;
		.t1 {
			height: 300rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			box-sizing: border-box;
		}
	}
</style>